<template>
  <div>
         <a-page-header
          style="border: 1px solid rgb(235, 237, 240)"
          title="返回"
          :ghost="false"
          :sub-title="isEdit > 0 ? '编辑商品' : '添加商品'"
          @back="
            () => {
              goodsInfo = {}
              this.$router.replace({ name: 'AdoptList' })
            }
          "
        />
    <div style="width: 100%; background: #fff; padding: 17px 32px 0 32px">
     <!-- <a-breadcrumb>
        <a-breadcrumb-item>商品</a-breadcrumb-item>
        <a-breadcrumb-item
          ><a href="javascipt:;" @click="$router.push({ name: 'GoodsList' })">商品列表</a></a-breadcrumb-item
        >
        <a-breadcrumb-item>{{ isEdit ? '编辑' : '添加' }}商品</a-breadcrumb-item>
        <h4
          style="
            padding-top: 17px;
            margin-bottom: 10px;
            font-size: 20px;
            font-family: PingFangSC-Medium;
            line-height: 28px;
          "
        >
          {{ goodsId ? '编辑商品' : '添加商品' }}
        </h4>
      </a-breadcrumb> -->


      <a-tabs v-model="activeTab">
        <a-tab-pane key="1" tab="基础信息"></a-tab-pane>
        <a-tab-pane key="2" tab="图文设置"></a-tab-pane>
        <a-tab-pane key="3" tab="规格库存"></a-tab-pane>
        <!-- <a-tab-pane key="4" tab="营销设置"></a-tab-pane>
        <a-tab-pane key="5" tab="分润设置"></a-tab-pane>
        <a-tab-pane key="6" tab="会员设置"></a-tab-pane>
        <a-tab-pane v-if="productType == 0 && goodsId > 0" key="7" tab="满减设置"></a-tab-pane>
        <a-tab-pane key="8" tab="自定义表单"></a-tab-pane> -->
      </a-tabs>
    </div>
    <!-- 表单区域 -->
    <a-card style="margin: 24px" :bordered="false">
      <a-form
        action=""
        method="post"
        @submit="submitAdd"
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <!-- 基础信息 -->
        <div v-show="activeTab == 1" style="padding-left: 8px">
            <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            :hidden="true"
            label="产品类型"
            help="请谨慎选择商品类型，如果修改已添加商品的类型，规格数据需要重新添加"
          >
            <a-radio-group
              @change="onChangeProduct"
              v-decorator="['product_type', { rules: [{ required: false, message: '请选择产品类型' }] }]"
            >
              <a-radio value="0"> 普通商品 </a-radio>
              <a-radio value="1"> 酒店预约 </a-radio>
              <a-radio value="2"> 服务预约 </a-radio>
              <a-radio value="3"> 虚拟商品 </a-radio>
              <a-radio value="4"> 认养商品 </a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            选择商品类型
          </h4>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="产品类型"
            help="请谨慎选择商品类型，如果修改已添加商品的类型，规格数据需要重新添加"
          >
            <a-radio-group
              @change="onChangeProduct"
              v-decorator="['product_type', { rules: [{ required: false, message: '请选择产品类型' }] }]"
            >
              <a-radio value="0"> 普通商品 </a-radio>
              <a-radio value="1"> 酒店预约 </a-radio>
              <a-radio value="2"> 服务预约 </a-radio>
              <a-radio value="3"> 虚拟商品 </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-divider /> -->
          <!-- <h4
            v-if="productType == 3"
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            核销卡发放
          </h4>
          <a-form-item v-if="productType == 3" :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择核销卡">
            <div type="flex" style="display: flex">
              <a-select
                style="width: 468px"
                mode="multiple"
                :allowClear="true"
                placeholder="请选择核销卡"
                :default-value="verify_card_default"
                @change="cardChange"
              >
                <a-select-option v-for="item in verify_list" :key="item.id" :value="item.name">
                  {{ item.name }}
                </a-select-option>
              </a-select>
              <a-button
                v-if="false"
                style="margin-left: 10px"
                @click="
                  (e) => {
                    if (this.select_cart_id.id > 0) {
                      this.goods_verify_card_list.push(this.select_cart_id)
                    }
                  }
                "
                >添加</a-button
              >
            </div>
          </a-form-item>
          <a-form-item
            v-if="goods_verify_card_list.length > 0 && fasle"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="已添加核销卡"
          >
            <div v-for="(item, index) in goods_verify_card_list" :key="index" style="display: flex; margin-bottom: 6px">
              <a-input :value="item ? item.name : ''" disabled />
              <a-button style="margin-left: 10px" @click="goods_verify_card_list.splice(index, 1)">删除</a-button>
            </div>
          </a-form-item>
          <a-divider v-if="productType == 3" /> -->
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            基础信息
          </h4>
          <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="一键采集">
            <a-input-search
              style="width: 468px"
              :placeholder="'请输入需要采集的商品地址'"
              :loading="copyLoading"
              enter-button="商品拉取"
              @search="goodsCopy"
              v-model="copyVal"
            >
             
            </a-input-search>
          </a-form-item> -->
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="认养名称" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'name',
                {
                  rules: [
                    { required: true, message: '请填写认养名称' },
                    { max: 200, message: '认养名称不能大于200个字符' },
                  ],
                },
              ]"
              placeholder="请填写认养名称"
            />
          </a-form-item>
          <a-form-item :hidden="true" :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品ID" hasFeedback>
            <a-input v-decorator="['id']" type="number" :step="1" suffix="件" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="认养分类" hasFeedback>
            <a-tree-select
              style="width: 468px"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择分类"
              allow-clear
              multiple
              tree-default-expand-all
              @change="onChangeCat"
              v-decorator="['cat_id', { rules: [{ required: true, message: '请选择认养分类' }] }]"
            >
              <a-tree-select-node
                v-for="(item0, index0) of catList"
                :key="index0"
                :value="item0.id"
                :title="item0.name"
              >
                <a-tree-select-node
                  v-if="item0.children.length > 0"
                  v-for="(item1, index1) of item0.children"
                  :key="index0 + '-' + index1"
                  :value="item1.id"
                  :title="item1.name"
                >
                  <a-tree-select-node
                    v-if="item1.children.length > 0"
                    v-for="(item2, index2) of item1.children"
                    :key="index0 + '-' + index1 + '-' + index2"
                    :value="item2.id"
                    :title="item2.name"
                  />
                </a-tree-select-node>
              </a-tree-select-node>
            </a-tree-select>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="关键字"
            help="能准确搜索到该商品 比如：家蓄|果树"
            hasFeedback
          >
            <a-input
              style="width: 468px"
              v-decorator="[
                'key_word',
                {
                  rules: [
                    { required: false, message: '请填写关键字' },
                    { max: 200, message: '关键字不能大于200个字符' },
                  ],
                },
              ]"
              placeholder="请填写关键字"
            />
          </a-form-item>
           <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="认养简介" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'desc',
                {
                  rules: [
                    { required: true, message: '请填写认养简介' },
                    { max: 200, message: '认养简介不能大于200个字符' },
                  ],
                },
              ]"
              placeholder="请填写认养简介"
            />
          </a-form-item>
           <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="认养产量"
            hasFeedback
          >
            <a-input
              style="width: 468px"
              v-decorator="[
                'yield',
                {
                  rules: [{ required: false, message: '请填认养产量' }],
                },
              ]"
              type="number"
              :step="0.01"
              suffix="kg"
              placeholder="请填写认养产量"
            />
          </a-form-item>
             <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="认养品种" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'varieties',
                {
                  rules: [
                    { required: true, message: '请填写认养品种' },
                    { max: 200, message: '认养品种不能大于200个字符' },
                  ],
                },
              ]"
              placeholder="请填写认养品种"
            />
          </a-form-item>
           <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="生长周期"
            hasFeedback
          >
            <a-input
              style="width: 468px"
              v-decorator="[
                'growth_cycle',
                {
                  rules: [{ required: false, message: '请填生长周期' }],
                },
              ]"
              type="number"
              :step="1"
              suffix="天"
              placeholder="请填生长周期"
            />
          </a-form-item>
          
          <a-divider />

          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            价格设置
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="售价" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'price',
                {
                  rules: [
                    { required: true, message: '填写售价' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '价格格式不正确' },
                  ],
                },
              ]"
              type="number"
              :step="0.01"
              prefix="￥"
              suffix="元"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="原价" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'original_price',
                {
                  rules: [
                    { required: true, message: '填写原价' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '原价格式不正确' },
                  ],
                },
              ]"
              type="number"
              :step="0.01"
              prefix="￥"
              suffix="元"
            />
          </a-form-item>
          <!-- <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="服务内容"
            help="例子：正品保障,极速发货,7天退换货。多个请使用英文逗号,分隔"
            hasFeedback
          >
            <a-input style="width: 468px" v-decorator="['service']" placeholder="请填写服务内容" />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-show="productType == 0"
            label="价格面议"
            class="label-widther"
          >
            <a-radio-group v-decorator="['is_negotiable', { rules: [{ required: false, message: '请选择价格面议' }] }]">
              <a-radio value="0"> 关闭 </a-radio>
              <a-radio value="1"> 开启 </a-radio>
            </a-radio-group>
          </a-form-item> -->
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单位" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'unit',
                {
                  rules: [
                    { required: false, message: '请填单位' },
                    { max: 5, message: '单位不能大于5个字符' },
                  ],
                },
              ]"
              placeholder="请填写单位"
            />
          </a-form-item>
          <!-- <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-show="productType == 0"
            label="重量"
            hasFeedback
          >
            <a-input
              style="width: 468px"
              v-decorator="[
                'weight',
                {
                  rules: [{ required: false, message: '请填重量' }],
                },
              ]"
              type="number"
              :step="0.01"
              suffix="kg"
              placeholder="请填写重量"
            />
          </a-form-item> -->
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="成本价" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'cost_price',
                {
                  rules: [
                    { required: false, message: '填写成本价' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '成本价格式不正确' },
                  ],
                },
              ]"
              type="number"
              :step="0.01"
              prefix="￥"
              suffix="元"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="已出售量"
            help="前端展示的销量=实际销量+已出售量"
            hasFeedback
          >
            <a-input
              style="width: 468px"
              v-decorator="[
                'virtual_sales',
                {
                  rules: [
                    { required: false, message: '填写已出售量' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,0}){0,1}$/, message: '已出售量不正确' },
                  ],
                },
              ]"
              type="number"
              :step="1"
              suffix="件"
            />
          </a-form-item>
         
          <a-divider />

          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            物流设置
          </h4>
          <!-- <a-form-item class="item-colunm-content" :labelCol="labelCol" :wrapperCol="wrapperCol" label="配送方式">
            <a-checkbox-group
              v-decorator="['deliverys', { initialValue: checkedList }]"
              @change="deliveryChange"
              :options="deliveryOptions"
              :disabled="productType == 3"
            />
          </a-form-item> -->
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-show="showDeliverys"
            label="运费设置"
            hasFeedback
          >
            <a-select
              style="width: 468px"
              v-decorator="[
                'freight',
                {
                  rules: [{ required: true, message: '请选择运费模板' }],
                },
              ]"
              placeholder="请选择运费规则"
            >
              <a-select-option v-for="postageItem of postage" :value="postageItem.id" :key="postageItem.id">
                {{ postageItem.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-divider />
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            收获设置
          </h4>
          <a-form-item v-bind="formItemLayoutWithOutLabel" :labelCol="labelCol" :wrapperCol="wrapperCol" label="认养收获" hasFeedback>
            
             <div
                v-for="(income, index) in adopt_income"
                :key="income.key"
                class="income-box"
                @dragover.prevent
                :draggable="true"
                v-dragging="{
                  item: income,
                  list: adopt_income,
                  group: 'div',
                }"
              >
                <div class="guige-image-box flex-x-center">
                  <div v-if="adopt_income[index].pic" class="goods_pic_item_box">
                    <!-- <a-icon class="icon"  type="close-square" /> -->
                    <div class="upload-img-box">
                      <img :src="adopt_income[index].pic" alt="" />
                      <div class="action-hover">
                        <div class="hover-bg"></div>
                        <div class="hover-body">
                          <div class="action-icons">
                            <a-icon @click="previewPic(adopt_income[index].pic)" type="eye" />

                            <a-icon @click="delAdoptIncome(index)" type="delete" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="upload-box">
                    <div class="upload-content">
                      <a-icon style="font-size: 14px; color: rgba(0, 0, 0, 0.45)" type="plus" />
                      <span style="font-size: 12px"></span>
                    </div>
                    <div class="self-com">
                      <storage-select selectNum="1" v-model="adopt_income[index].pic"></storage-select>
                    </div>
                  </div>
                </div>
                <a-input
                  v-model:value="income.income_name"
                  placeholder="请输入收获内容"
                  style="width: 60%; margin: 0 5px"
                />
                <a-icon
                  v-if="adopt_income.length > 1"
                  class="dynamic-delete-button"
                  type="minus-circle-o"
                  :disabled="adopt_income.length === 1"
                  @click="removeDomain(index)"
                />
              </div>
            <a-button type="dashed" style="width: 60%" @click="addDomain">
              <a-icon type="plus" />
            </a-button>
          </a-form-item>
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            自采时间设置
          </h4>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
            label="日期选择"
          >
            <a-row>
              <a-col :span="12">
                <!-- <a-slider v-model="bookDay" @change="OnChangeSlider" :min="1" :max="30" /> -->
                <el-date-picker
                  v-model="self_pick_date"
                  type="daterange"
                  unlink-panels
                  clear-icon=""
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </a-col>
              <a-col :span="4">
                <!-- <a-input-number v-model="bookDay" :min="1" :max="30" /> -->
              </a-col>
              <a-col :span="4">
                <!-- <a-button @click="setData"> 重置 </a-button> -->
              </a-col>
            </a-row>
      
          </a-form-item>
            <a-form-item
            :labelCol="labelCol"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
            label="时间选择"
           >
        
            <a-row
              style="margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee"
            >
              <a-col :span="10">
                <div
                  class="timeSlot"
                   v-for="(time, timeIndex) in self_pick_times"
                  :key="timeIndex"
                  style="margin-bottom: 10px"
                >
                  <el-time-select
                    placeholder="起始时间"
                    v-model="time.start_time"
                    :picker-options="{
                      start: timeIndex == 0 ? '00:00' : self_pick_times[timeIndex - 1].end_time,
                      step: '01:00',
                      end: '24:00',
                    }"
                    size="mini"
                    style="width: 120px"
                    @change="(e) => changeTime(e, time)"
                  >
                  </el-time-select>
                  <el-time-select
                    :disabled="!time.start_time"
                    placeholder="结束时间"
                    v-model="time.end_time"
                    :picker-options="{
                      start: '00:00',
                      step: '01:00',
                      end: '24:00',
                      minTime: time.start_time,
                    }"
                    size="mini"
                    style="width: 120px; margin-left: 10px"
                  >
                  </el-time-select>
                  <a-button
                    type="danger"
                    icon="delete"
                    size="small"
                    style="margin-left: 10px"
                    @click="deleteSelfPickTime(self_pick_times, timeIndex)"
                  />
                </div>
                <a-button
                  type="primary"
                  icon="plus"
                  v-if="self_pick_times.length == 0 || (self_pick_times && self_pick_times[self_pick_times.length - 1].end_time)"
                  size="small"
                  @click="addSelfPickTime(self_pick_times, index)"
                />
              </a-col>
            
            </a-row>
          </a-form-item>

          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            监控设备
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="监控选择" hasFeedback>
            <a-tree-select
              style="width: 468px"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择监控设备"
              allow-clear
              multiple
              tree-default-expand-all
              @change="onChangeCat"
              v-decorator="['device_id', { rules: [{ required: false, message: '请选择监控设备' }] }]"
            >
              <a-tree-select-node
                v-for="(item, index) of deviceList"
                :key="index"
                :value="item.id"
                :title="item.name"
              >
              </a-tree-select-node>
            </a-tree-select>
          </a-form-item>

        </div>
        <!-- 图文设置 -->
        <div v-show="activeTab == 2" style="padding-left: 8px">
          <h4 style="font-size: 16px; font-family: PingFangSC-Medium; line-height: 24px; color: rgba(0, 0, 0, 0.85)">
            商品图片
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品图片" hasFeedback>
            <!-- 上传图片 -->
            <cyyUploadImg
              @uploadSuccess="selectPic"
              @deleteImg="delPic"
              :imgList.sync="goodsInfo.goods_pic_list"
              dataType="list"
            >
            </cyyUploadImg>
          </a-form-item>
          <!-- <a-form-item
            v-if="goodsInfo.video_url != void 0"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商品视频"
            hasFeedback
          >
            <cyyUploadVideo
              :videoSrc="goodsInfo.video_url"
              @uploadSuccess="goodsVideoCb"
              @deleteVideo="
                () => {
                  goodsInfo.video_url = ''
                }
              "
            ></cyyUploadVideo>
          </a-form-item> -->
          <a-divider />
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            商品详情
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图文详情">
            <!-- <quill-editor
                v-decorator="['content' ]"
                ref="myQuillEditor"
                :options="editorOption">
              </quill-editor> -->
            <WangEditor :value="goodsInfo.content" @change="onDescChange"></WangEditor>
            <a-textarea
              :hidden="true"
              v-decorator="['content', { rules: [{ required: true, message: '请输入图文详情' }] }]"
            />
          </a-form-item>
        </div>
        <!-- 规格库存 -->
        <div v-show="activeTab == 3">
          <h1 class="form-title">商品库存</h1>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品库存" hasFeedback>
            <a-input
              placeholder="请填写库存"
              :disabled="isAttr == 1"
              style="width: 468px"
              v-decorator="[
                'goods_num',
                {
                  rules: [
                    { required: true, message: '请填写库存' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,0}){0,1}$/, message: '库存不正确' },
                  ],
                },
              ]"
              type="number"
              :step="1"
              suffix="件"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品货号" hasFeedback>
            <div class="item-table">
              <a-input
                style="width: 468px"
                placeholder="请填写商品货号"
                :disabled="isAttr == 1"
                v-decorator="['goods_no', { rules: [{ max: 100, message: '最大100个字符' }] }]"
              />
            </div>
          </a-form-item>
          <el-divider style="margin: 24px 0"></el-divider>

          <h1 class="form-title">商品规格</h1>
          <a-form-item
            style="margin-bottom: 24px"
            v-show="productType == 0 || productType == 5"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="是否使用规格"
          >
            <a-radio-group @change="onChangeAttr" v-decorator="['use_attr']">
              <a-radio value="1"> 使用 </a-radio>
              <a-radio value="0"> 不使用 </a-radio>
            </a-radio-group>
          </a-form-item>

          <!-- 日期选择 -->
          <a-form-item
            v-if="isAttr == 1 && productType == 1"
            :labelCol="labelCol"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
            label="日期选择"
          >
            <a-row>
              <a-col :span="12">
                <!-- <a-slider v-model="bookDay" @change="OnChangeSlider" :min="1" :max="30" /> -->
                <el-date-picker
                  v-model="value2"
                  type="daterange"
                  unlink-panels
                  clear-icon=""
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  @change="OnChangeSlider"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </a-col>
              <a-col :span="4">
                <!-- <a-input-number v-model="bookDay" :min="1" :max="30" /> -->
              </a-col>
              <a-col :span="4">
                <!-- <a-button @click="setData"> 重置 </a-button> -->
              </a-col>
            </a-row>
            <a-table
              v-if="bookConfig.length > 0"
              ref="table"
              :columns="attrBookColumns"
              :style="{ marginTop: '10px', maxWidth: '1000px' }"
              :bordered="false"
              :dataSource="bookConfig"
              size="small"
              :row-key="(r, i) => JSON.stringify(r)"
              :pagination="false"
            >
              <div slot="numDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                <a-input-search
                  @search="(e) => settingDayAll(e, setSelectedKeys, selectedKeys)"
                  size="small"
                  placeholder="批量设置"
                >
                  <a-icon slot="enterButton" type="plus" />
                </a-input-search>
              </div>
              <div slot="priceDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                <a-input-search
                  @search="(e) => settingDayAll(e, setSelectedKeys, selectedKeys)"
                  size="small"
                  placeholder="批量设置"
                >
                  <a-icon slot="enterButton" type="plus" />
                </a-input-search>
              </div>
              <template slot="num" slot-scope="num, attrItem, attrIndex">
                <a-input-number
                  style="display: inherit"
                  size="small"
                  :autoFocus="bookFocusData.type == 'num' && bookFocusData.index == attrIndex"
                  :value="num"
                  @change="(e) => handleBookChange(e, 'num', attrIndex)"
                />
              </template>
              <template slot="price" slot-scope="price, attrItem, attrIndex">
                <div style="width: 100px">
                  <a-input
                    type="number"
                    step="0.01"
                    size="small"
                    :autoFocus="bookFocusData.type == 'price' && bookFocusData.index == attrIndex"
                    :value="price"
                    @change="(e) => handleBookChange(e.target.value, 'price', attrIndex)"
                  />
                </div>
              </template>
              <template slot="action" slot-scope="text, record, attrIndex">
                <!-- <a-button
                  type="danger"
                  icon="delete"
                  size="small"
                  style="margin-left: 10px"
                  @click="deleteBookDate(record, attrIndex)"
                /> -->
                <div class="item-table">
                  <el-button type="text" @click="deleteBookDate(record, attrIndex)">删除</el-button>
                </div>
              </template>
            </a-table>
          </a-form-item>
          <a-form-item
            v-if="isAttr == 1 && productType == 2"
            :labelCol="labelCol"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
            label="日期选择"
          >
            <a-row>
              <a-col :span="12">
                <a-slider v-model="goodsInfo.service_book.date" @change="onChangeServiceSlider" :min="1" :max="7" />
                <!-- <el-date-picker
                  v-model="value1"
                  type="daterange"
                  unlink-panels
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  @change="onChangeServiceSlider"
                  :picker-options="pickerOptions"
                >
                </el-date-picker> -->
              </a-col>
              <a-col :span="4">
                <a-input-number
                  v-model="goodsInfo.service_book.date"
                  disabled
                  :min="1"
                  :max="7"
                  style="margin-left: 16px"
                />
              </a-col>
              <a-col :span="4">
                <a-select v-model="goodsInfo.service_book.flag" @change="changeFlag">
                  <a-select-option :value="1"> 半小时 </a-select-option>
                  <a-select-option :value="2"> 1小时 </a-select-option>
                </a-select>
              </a-col>
              <a-button style="margin-left: 10px" @click="resetData">重置</a-button>
            </a-row>
            <a-row>
              <a-col :span="4"> 日期 </a-col>
              <a-col :span="10"> 时间段 </a-col>
              <a-col :span="4"> 时间 </a-col>
              <a-col :span="6"> 价格 <span style="margin-left: 80px">库存</span> </a-col>
            </a-row>
            <a-row
              v-for="(row, index) in serviceBookDate"
              :key="index"
              style="margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee"
            >
              <a-col :span="4">
                {{ row.date }}
                <a-button
                  type="danger"
                  icon="delete"
                  size="small"
                  style="display: block"
                  @click="deleteDate(row, index)"
                />
              </a-col>
              <a-col :span="10">
                <div
                  class="timeSlot"
                  v-for="(time, timeIndex) in row.time"
                  :key="timeIndex"
                  style="margin-bottom: 10px"
                >
                  <el-time-select
                    placeholder="起始时间"
                    v-model="time.start_time"
                    :picker-options="{
                      start: timeIndex == 0 ? '00:00' : row.time[timeIndex - 1].end_time,
                      step: goodsInfo.service_book.flag == 1 ? '00:30' : '01:00',
                      end: '24:00',
                    }"
                    size="mini"
                    style="width: 120px"
                    @change="(e) => changeTime(e, time)"
                  >
                  </el-time-select>
                  <el-time-select
                    :disabled="!time.start_time"
                    placeholder="结束时间"
                    v-model="time.end_time"
                    :picker-options="{
                      start: '00:00',
                      step: goodsInfo.service_book.flag == 1 ? '00:30' : '01:00',
                      end: '24:00',
                      minTime: time.start_time,
                    }"
                    size="mini"
                    style="width: 120px; margin-left: 10px"
                    @change="(e) => changeTime(e, time)"
                  >
                  </el-time-select>
                  <a-button
                    type="danger"
                    icon="delete"
                    size="small"
                    style="margin-left: 10px"
                    @click="deleteTime(row, timeIndex)"
                  />
                </div>
                <a-button
                  type="primary"
                  icon="plus"
                  v-if="row.time.length == 0 || row.time[row.time.length - 1].end_time"
                  size="small"
                  @click="addTime(row, index)"
                />
              </a-col>
              <a-col :span="10">
                <div class="timePrice" v-for="(item, index) in row.time" :key="index">
                  <div v-for="(time, timeIndex) in item.times" :key="timeIndex">
                    <span>{{ time.time }}</span>
                    <a-input type="number" step="0.01" size="small" v-model="time.price" style="width: 85px" />
                    <a-divider type="vertical" />
                    <a-input type="number" step="1" size="small" v-model="time.num" style="width: 90px" />
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-form-item>
          <!-- 规格选择 -->
          <a-form-item
            v-if="isAttr == 1 && (productType == 0 || productType == 5)"
            :labelCol="{ xs: { span: 0 }, sm: { span: 0 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }"
          >
            <a-row style="margin-bottom: 24px">
              <a-col :span="2" class="guige-label">商品规格：</a-col>
              <a-col :span="22">
                <a-select
                  show-search
                  placeholder="请选择规格类型"
                  option-filter-prop="children"
                  style="width: 468px"
                  :filter-option="filterOption"
                  @change="attrSelectChange"
                >
                  <a-select-option v-for="(attr, attrIndex) of attrList" :key="attrIndex" :value="attrIndex">
                    {{ attr.name }}
                  </a-select-option>
                </a-select>
              </a-col>
            </a-row>
            <a-row :style="{ marginTop: '10px', marginBottom: '24px' }">
              <a-col :span="2" class="guige-label">规格组：</a-col>
              <a-col :span="22">
                <div style="width: 468px">
                  <a-input v-model="addAttrData.groupName" placeholder="添加规格组">
                    <a-icon @click="addAttrGroup" slot="addonAfter" type="plus" />
                  </a-input>
                </div>
              </a-col>
            </a-row>
            <!--  -->
            <a-row>
              <a-col :span="2" class="guige-label">商品规格：</a-col>
              <a-col :span="22">
                <a-row
                  style="padding: 10px"
                  :gutter="0"
                  :style="{ border: '1px solid #f0f0f0', marginBottom: '24px' }"
                  v-for="(attr1, index1) of AttrGroupList"
                  :key="index1"
                >
                  <a-row>
                    <!-- <a-space style="margin-left: 10px; font-weight: bold">
                    {{ attr1.attr_group_name }}
                    <a-icon @click="delAttrGroup(index1)" type="close-circle" />
                  </a-space> -->
                    <!-- <a-tag closable @close="delAttrGroup(index1)">{{ attr1.attr_group_name }}</a-tag> -->
                    <el-tag
                      type="info"
                      effect="plain"
                      size="medium"
                      closable
                      :disable-transitions="false"
                      @close="delAttrGroup(index1)"
                    >
                      {{ attr1.attr_group_name }}
                    </el-tag>
                  </a-row>
                  <a-row align="middle" type="flex">
                    <!-- <a-space v-for="(attr2, index2) of attr1.attr_list" :key="index2" style="margin-left: 10px">
                    {{ attr2.attr_name }}
                    <a-icon @click="delAttr(index1, index2)" type="close-circle" />
                  </a-space> -->
                    <span style="margin: 10px 10px 0px 0" v-for="(attr2, index2) of attr1.attr_list" :key="index2">
                      <el-tag
                        type="info"
                        effect="plain"
                        size="medium"
                        closable
                        :disable-transitions="false"
                        @close="delAttr(index1, index2)"
                      >
                        {{ attr2.attr_name }}
                      </el-tag>
                    </span>

                    <span style="margin: 10px 10px 0px 0">
                      <a-input-search
                        class="add-guige"
                        @search="(e) => addAttr(e, index1, attr1.attr_group_name)"
                        size="small"
                        placeholder="添加规格值"
                      >
                        <a-icon slot="enterButton" type="plus" />
                      </a-input-search>
                    </span>
                    <!-- <a-space style="margin-left: 10px">
                    <a-col :span="15">

                    </a-col>
                  </a-space> -->
                  </a-row>
                </a-row>
              </a-col>
            </a-row>
            <!--  -->
            <a-row>
              <a-col :span="2" class="guige-label"></a-col>
              <a-col :span="22">
                <a-table
                  v-if="GoodsAttr.length > 0"
                  ref="table"
                  :columns="attrColumns"
                  bordered
                  :dataSource="getGoodsAttrList"
                  size="small"
                  :row-key="(r, i) => JSON.stringify(r)"
                  :pagination="false"
                  class="guige-table"
                >
                  <div slot="numDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                    <a-input-search
                      @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
                      size="small"
                      placeholder="批量设置"
                    >
                      <a-icon slot="enterButton" type="plus" />
                    </a-input-search>
                  </div>
                  <div slot="priceDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                    <a-input-search
                      @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
                      size="small"
                      placeholder="批量设置"
                    >
                      <a-icon slot="enterButton" type="plus" />
                    </a-input-search>
                  </div>
                  <span slot="attr_list" slot-scope="attr_list">
                    <span style="margin-right: 4px" v-for="(item, index) of attr_list" :key="index">
                      {{ item.attr_name }}
                    </span>
                  </span>
                  <div class="flex-x-center" slot="num" slot-scope="num, attrItem, attrIndex">
                    <a-input-number
                      style="width: 100px"
                      size="small"
                      :autoFocus="autoFocusData.type == 'num' && autoFocusData.index == attrIndex"
                      :value="num"
                      @change="(e) => handleChange(e, 'num', attrIndex)"
                      placeholder="请输入库存"
                    />
                  </div>
                  <div class="flex-x-center" slot="price" slot-scope="price, attrItem, attrIndex">
                    <a-input
                      type="number"
                      step="0.01"
                      size="small"
                      :autoFocus="autoFocusData.type == 'price' && autoFocusData.index == attrIndex"
                      :value="price"
                      @change="(e) => handleChange(e.target.value, 'price', attrIndex)"
                      style="width: 100px"
                      placeholder="请输入价格"
                    />
                  </div>
                  <div class="flex-x-center" slot="no" slot-scope="no, attrItem, attrIndex">
                    <a-input
                      style="margin: -5px 0; width: 100px"
                      size="small"
                      :autoFocus="autoFocusData.type == 'no' && autoFocusData.index == attrIndex"
                      :value="no"
                      @change="(e) => handleChange(e.target.value, 'no', attrIndex)"
                      placeholder="请输入货号"
                    />
                  </div>
                  <template slot="pic" slot-scope="pic, attrItem, attrIndex">
                    <!-- <storage-select placeholder="请选择图片" v-model="GoodsAttr[attrIndex].pic"></storage-select> -->
                    <!-- <a-input
                  style="margin: -5px 0"
                  size="small"
                  :autoFocus="autoFocusData.type == 'pic' && autoFocusData.index == attrIndex"
                  :value="pic"
                  @change="(e) => handleChange(e.target.value, 'pic', attrIndex)"
                /> -->
                    <div class="guige-image-box flex-x-center">
                      <div v-if="GoodsAttr[getAttrActiveIndex(attrIndex)].pic" class="goods_pic_item_box">
                        <!-- <a-icon class="icon"  type="close-square" /> -->
                        <div class="upload-img-box">
                          <img :src="GoodsAttr[getAttrActiveIndex(attrIndex)].pic" alt="" />
                          <div class="action-hover">
                            <div class="hover-bg"></div>
                            <div class="hover-body">
                              <div class="action-icons">
                                <a-icon @click="previewPic(GoodsAttr[getAttrActiveIndex(attrIndex)].pic)" type="eye" />

                                <!-- <a-icon @click="() => (this.GoodsAttr[getAttrActiveIndex(attrIndex)].pic = '')" type="delete" /> -->
                                <a-icon @click="GoodsAttr[getAttrActiveIndex(attrIndex)].pic = ''" type="delete" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="upload-box">
                        <div class="upload-content">
                          <a-icon style="font-size: 14px; color: rgba(0, 0, 0, 0.45)" type="plus" />
                          <span style="font-size: 12px"></span>
                        </div>
                        <div class="self-com">
                          <storage-select selectNum="1" v-model="GoodsAttr[attrIndex].pic"></storage-select>
                        </div>
                      </div>
                    </div>
                  </template>
                </a-table>

                <el-pagination
                  style="margin-top:10px;"
                  :page-size="size"
                  :current-page="page"
                  background
                  layout="prev, pager, next"
                  @current-change="e => page = e"
                  :total="GoodsAttr.length">
                </el-pagination>
              </a-col>
            </a-row>
          </a-form-item>
          <a-divider />
        </div>
        <!-- 营销 -->
        <div v-show="activeTab == 4" style="padding-left: 8px">
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            营销设置
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="积分赠送" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'integral[give]',
                {
                  rules: [
                    { required: false, message: '填写赠送积分' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,0}){0,1}$/, message: '赠送积分数量不正确' },
                  ],
                },
              ]"
              placeholder="请填写赠送积分"
              type="number"
              :step="1"
              suffix="分"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="积分抵扣" hasFeedback>
            <a-input
              style="width: 468px"
              v-decorator="[
                'integral[forehead]',
                { rules: [{ pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '抵扣金额不正确' }] },
              ]"
              type="number"
              :step="0.01"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="限购数量"
            v-show="productType == 0 || productType == 3"
            help="设置为0则不限购，大于0则等于对应的限购数量"
            hasFeedback
          >
            <a-input
              style="width: 468px"
              v-decorator="[
                'confine_count',
                {
                  rules: [
                    { required: false, message: '填写限购数量' },
                    { pattern: /((^[1-9]\d*)|^0)(\.\d{0,0}){0,1}$/, message: '限购数量不正确' },
                  ],
                },
              ]"
              type="number"
              :step="1"
              suffix="件"
            />
          </a-form-item>
          <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否使用规格">
            <a-radio-group style="width: 468px" v-decorator="['integral[more]']">
              <a-radio value="0"> 不允许 </a-radio>
              <a-radio value="1"> 允许 </a-radio>
            </a-radio-group>
          </a-form-item> -->
          <a-divider />
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
            v-if="productType != 3"
          >
            卡劵发放
          </h4>
          <a-form-item :labelCol="labelCol" v-show="productType != 3" :wrapperCol="wrapperCol" label="选择卡劵">
            <div type="flex" style="display: flex">
              <a-select
                style="width: 468px"
                mode="multiple"
                :allowClear="true"
                placeholder="请选择卡劵"
                :default-value="verify_card_default"
                @change="cardChange"
              >
                <a-select-option v-for="item in verify_list" :key="item.id" :value="item.name">
                  {{ item.name }}
                </a-select-option>
              </a-select>
              <a-button
                v-if="false"
                style="margin-left: 10px"
                @click="
                  (e) => {
                    if (this.select_cart_id.id > 0) {
                      this.goods_verify_card_list.push(this.select_cart_id)
                    }
                  }
                "
                >添加</a-button
              >
            </div>
          </a-form-item>
          <a-form-item
            v-if="goods_verify_card_list.length > 0 && fasle"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="已添加卡劵"
          >
            <div v-for="(item, index) in goods_verify_card_list" :key="index" style="display: flex; margin-bottom: 6px">
              <a-input :value="item ? item.name : ''" disabled />
              <a-button style="margin-left: 10px" @click="goods_verify_card_list.splice(index, 1)">删除</a-button>
            </div>
          </a-form-item>
          <a-divider v-if="productType != 3" />
        </div>
        <!-- 分润设置 -->
        <div v-show="activeTab == 5" style="padding-left: 8px">
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            分红设置
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="分红比例">
            <a-input
              style="width: 200px"
              default-value="0.00"
              v-decorator="[
                'rate',
                {
                  rules: [{ pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '分红比例格式不正确' }],
                },
              ]"
              type="number"
              :step="0.01"
              suffix="%"
            />
          </a-form-item>
          <a-divider />
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            分销设置
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否开启分销">
            <a-radio-group v-decorator="['individual_share']" @change="individualShareChange($event, 'share')">
              <a-radio value="0"> 关闭 </a-radio>
              <a-radio value="1"> 开启 </a-radio>
            </a-radio-group>
          </a-form-item>
          <div v-show="!hideDistribution">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="分销佣金类型">
              <a-radio-group @change="onChangeShareType" v-decorator="['share_type']">
                <a-radio value="0"> 百分比 </a-radio>
                <a-radio value="1"> 固定金额 </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="分销佣金类型">
              <a-radio-group @change="onChangeSettingType" v-decorator="['attr_setting_type']">
                <a-radio value="0"> 普通设置 </a-radio>
                <a-radio value="1"> 详细设置 </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-divider />
            <h4
              style="
                font-size: 16px;
                font-family: PingFangSC-Medium;
                line-height: 24px;
                color: rgba(0, 0, 0, 0.85);
                margin-bottom: 20px;
              "
            >
              佣金设置
            </h4>
            <a-form-item :hidden="attrSettingType == 1" :labelCol="labelCol" :wrapperCol="wrapperCol" label="一级佣金">
              <a-input
                style="width: 468px"
                v-decorator="[
                  'share_commission_first',
                  { rules: [{ pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '金额格式错误' }] },
                ]"
                type="number"
                :step="0.01"
              />
            </a-form-item>
            <a-form-item :hidden="attrSettingType == 1" :labelCol="labelCol" :wrapperCol="wrapperCol" label="二级佣金">
              <a-input
                style="width: 468px"
                v-decorator="[
                  'share_commission_second',
                  { rules: [{ pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '金额格式错误' }] },
                ]"
                type="number"
                :step="0.01"
              />
            </a-form-item>
            <a-form-item :hidden="attrSettingType == 1" :labelCol="labelCol" :wrapperCol="wrapperCol" label="三级佣金">
              <a-input
                style="width: 468px"
                v-decorator="[
                  'share_commission_third',
                  { rules: [{ pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: '金额格式错误' }] },
                ]"
                type="number"
                :step="0.01"
              />
            </a-form-item>
            <a-form-item
              class="distribution-table"
              :hidden="attrSettingType == 0"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="规格分销"
            >
              <a-table
                v-if="GoodsAttr.length > 0"
                ref="table"
                :columns="sharaColumns"
                :style="{ marginTop: '10px' }"
                :dataSource="getGoodsAttrList"
                size="small"
                :row-key="(r, i) => JSON.stringify(r)"
                :pagination="false"
              >
                <span slot="attr_list" slot-scope="attr_list">
                  <span style="margin-right: 4px" v-for="(item, index) of attr_list" :key="index">
                    {{ item.attr_name }}
                  </span>
                </span>
                <template slot="num" slot-scope="num, attrItem, attrIndex">
                  <a-input-number
                    disabled
                    style="display: inherit"
                    size="small"
                    :autoFocus="autoFocusData.type == 'num' && autoFocusData.index == attrIndex"
                    :value="num"
                    @change="(e) => handleChange(e, 'num', attrIndex)"
                  />
                </template>
                <template slot="price" slot-scope="price, attrItem, attrIndex">
                  <a-input
                    disabled
                    type="number"
                    step="0.01"
                    size="small"
                    :autoFocus="autoFocusData.type == 'price' && autoFocusData.index == attrIndex"
                    :value="price"
                    @change="(e) => handleChange(e.target.value, 'price', attrIndex)"
                  />
                </template>
                <template slot="share_commission_first" slot-scope="share_commission_first, attrItem, attrIndex">
                  <a-input
                    type="number"
                    step="0.01"
                    size="small"
                    :autoFocus="autoFocusData.type == 'share_commission_first' && autoFocusData.index == attrIndex"
                    :value="share_commission_first"
                    :suffix="shareType > 0 ? '元' : '%'"
                    @change="(e) => handleChange(e.target.value, 'share_commission_first', attrIndex)"
                  />
                </template>
                <template slot="share_commission_second" slot-scope="share_commission_second, attrItem, attrIndex">
                  <a-input
                    type="number"
                    step="0.01"
                    size="small"
                    :autoFocus="autoFocusData.type == 'share_commission_second' && autoFocusData.index == attrIndex"
                    :value="share_commission_second"
                    :suffix="shareType > 0 ? '元' : '%'"
                    @change="(e) => handleChange(e.target.value, 'share_commission_second', attrIndex)"
                  />
                </template>
                <template slot="share_commission_third" slot-scope="share_commission_third, attrItem, attrIndex">
                  <a-input
                    type="number"
                    step="0.01"
                    size="small"
                    :autoFocus="autoFocusData.type == 'share_commission_third' && autoFocusData.index == attrIndex"
                    :value="share_commission_third"
                    :suffix="shareType > 0 ? '元' : '%'"
                    @change="(e) => handleChange(e.target.value, 'share_commission_third', attrIndex)"
                  />
                </template>
              </a-table>
            </a-form-item>
          </div>
          <a-divider />
        </div>
        <!-- 会员价 -->
        <div v-show="activeTab == 6" style="padding-left: 8px">
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            会员设置
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否开启会员价">
            <a-radio-group v-decorator="['is_level']" @change="individualShareChange($event, 'level')">
              <a-radio value="0"> 关闭 </a-radio>
              <a-radio value="1"> 开启 </a-radio>
            </a-radio-group>
          </a-form-item>
          <div v-show="!hideLevelDistribution">
            <a-form-item :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 22 } }" label="规格分销">
              <table border="1" borderColor="#f0f0f0">
                <thead>
                  <tr>
                    <th
                      v-for="(thItem, thIndex) of userLevelColumns"
                      :key="thIndex"
                      :width="thIndex == 0 ? '30%' : '10%'"
                    >
                      {{ thItem.title }}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(trItem, trIndex) of GoodsAttr" :key="trIndex">
                    <td>
                      <span style="margin-right: 4px" v-for="(item, index) of trItem.attr_list" :key="index">
                        {{ item.attr_name }}
                      </span>
                    </td>
                    <td v-for="(tdItem, tdIndex) of level" :key="tdIndex">
                      <a-input
                        type="number"
                        step="0.01"
                        size="small"
                        :id="trItem['member' + tdItem.id]"
                        :autoFocus="autoFocusData.type == 'member' + tdItem.id && autoFocusData.index == trIndex"
                        :value="trItem['member' + tdItem.id]"
                        @change="(e) => handleChange(e.target.value, 'member' + tdItem.id, trIndex)"
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
            </a-form-item>
          </div>

          <a-divider />
        </div>
        <!-- 满减设置 -->
        <div v-show="activeTab == 7" style="padding-left: 8px">
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            满减设置
          </h4>
          <!-- 满减 -->
          <SaleConfDrawer
            :visible.sync="isShowSaleConfDrawer"
            :goodsId="goodsId"
            :currentGood="goodsInfo"
          ></SaleConfDrawer>
          <a-divider />
        </div>
        <!-- 商品自定义表单 -->
        <div v-show="activeTab == 8" style="padding-left: 8px">
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            自定义表单
          </h4>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否开启">
            <a-radio-group name="radioGroup" v-model="goods_form.is_form">
              <a-radio :value="1"> 是 </a-radio>
              <a-radio :value="0"> 否 </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="表单名称">
            <a-input style="width: 468px" v-model="goods_form.form_name"> </a-input>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="表单设置">
            <div class="add">
              <a-select v-model="addType" style="width: 468px">
                <a-select-option value="text"> 单行文本 </a-select-option>
                <a-select-option value="textarea"> 多行文本 </a-select-option>
                <a-select-option value="time"> 时间选择器 </a-select-option>
                <a-select-option value="date"> 日期选择器 </a-select-option>
                <a-select-option value="radio"> 单选 </a-select-option>
                <a-select-option value="checkbox"> 多选 </a-select-option>
                <a-select-option value="uploadImg"> 图片上传 </a-select-option>
              </a-select>
              <div class="add-action" @click="addList">
                <a-icon type="plus" />
              </div>
              <!-- <a-button type="primary" style="margin-left: 20px" @click="addList">添加一个字段</a-button> -->
            </div>

            <div class="table">
              <div class="table-body">
                <a-row class="title self-th">
                  <a-col :span="4" style="text-align: left"> 类型 </a-col>
                  <a-col :span="4" style="text-align: left"> 名称 </a-col>
                  <a-col :span="4" style="text-align: left"> 提示语 </a-col>
                  <a-col :span="6" style="text-align: left"> 默认值 </a-col>
                  <a-col :span="2" style="text-align: left"> 必填 </a-col>
                  <a-col :span="4" style="text-align: left"> 位置 </a-col>
                </a-row>
                <div class="list" @dragover.prevent>
                  <a-row
                    class="item tr-row"
                    v-for="(item, index) in goods_form.form_list"
                    :key="index"
                    :draggable="true"
                    v-dragging="{
                      item: item,
                      list: goods_form.form_list,
                      group: 'row',
                    }"
                  >
                    <a-col :span="4" style="text-align: left">
                      {{
                        item.type == 'text'
                          ? '单行文本'
                          : item.type == 'textarea'
                          ? '多行文本'
                          : item.type == 'time'
                          ? '时间选择器'
                          : item.type == 'date'
                          ? '日期选择器'
                          : item.type == 'radio'
                          ? '单选'
                          : item.type == 'checkbox'
                          ? '多选'
                          : item.type == 'uploadImg'
                          ? '图片上传'
                          : ''
                      }}
                    </a-col>
                    <a-col :span="4" style="text-align: left">
                      <a-input style="width: 100%" v-model="item.name"></a-input>
                    </a-col>
                    <a-col :span="4" style="text-align: left">
                      <a-input
                        style="width: 100%"
                        v-model="item.tip"
                        :placeholder="item.type == 'uploadImg' ? '请选择图片' : ''"
                        v-if="item.type == 'text' || item.type == 'textarea' || item.type == 'uploadImg'"
                      ></a-input>
                    </a-col>
                    <a-col :span="6" style="text-align: left">
                      <a-input
                        v-if="
                          item.type == 'text' ||
                          item.type == 'textarea' ||
                          item.type == 'radio' ||
                          item.type == 'checkbox'
                        "
                        v-model="item.default"
                      ></a-input>
                      <a-time-picker
                        v-model="item.default"
                        v-if="item.type == 'time'"
                        style="max-width: 100%"
                        valueFormat="HH:mm:ss"
                      />
                      <a-date-picker v-model="item.default" v-if="item.type == 'date'" valueFormat="YYYY-MM-DD" />
                      <p v-if="item.type == 'radio' || item.type == 'checkbox'" class="tip" style="color: #888">
                        多个请用英文 , 分开
                      </p>
                      <p v-if="item.type == 'radio' || item.type == 'checkbox'" class="tip" style="color: #d9534f">
                        注:第一个值默认选中
                      </p>
                    </a-col>
                    <a-col :span="2" style="text-align: left">
                      <a-checkbox
                        :checked="item.required == 1 ? true : item.required == 0 ? false : ''"
                        @change="(e) => changeChecked(e, index)"
                      ></a-checkbox>
                    </a-col>
                    <a-col :span="4" style="text-align: left">
                      <a-button type="danger" size="small" @click="deleteItem(index)">删除</a-button>
                      <a-icon type="unordered-list" style="cursor: move; margin-left: 5px" />
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
            <div class="warning">注：名称最好不要超过4个中文字</div>
          </a-form-item>
          <a-divider />
        </div>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button :loading="butLoading" type="primary" html-type="submit"> 保存 </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <a-modal
      :visible="showPreviwModal"
      @ok="
        () => {
          showPreviwModal = fasle
        }
      "
      @cancel="
        () => {
          showPreviwModal = fasle
        }
      "
    >
      <div style="display: flex; justify-content: center">
        <img style="width: 300px" :src="previewImgSrc" alt="" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import pick from 'lodash.pick'
import { AdoptSave as save, edit, Copy } from '@/api/adopt/goods'
import { adoptCat as catListApi } from '@/api/adopt/cat'
import { deviceListApi } from '@/api/adopt/device'
import { list as attrListApi } from '@/api/goods/attr'
import { STable, WangEditor } from '@/components'
// import AdvancedForm from '../form/advancedForm/AdvancedForm.vue'
import { findKey } from '@/utils/util'
import SaleConfDrawer from './components/goods/SaleConfDrawer'

import { cyyUploadVideo, cyyUploadImg } from '@/components/CyyUi/index'

function getDateArray(start, end, splitTime) {
  if (!splitTime || splitTime == '') {
    return
  }
  const y = new Date().getFullYear()
  const m = new Date().getMonth() + 1
  const d = new Date().getDate()
  const startTime = new Date(y + '/' + m + '/' + d + ' ' + start).getTime()
  const endTime = new Date(y + '/' + m + '/' + d + ' ' + end).getTime()
  const split = (splitTime - 0) * 60 * 1000
  const length = (endTime - startTime) / split + 1
  const arr = []
  if (length >= 1) {
    for (let i = 0; i < length; i++) {
      if (endTime > startTime + split * i) {
        const date = new Date(startTime + split * i)
        let h = date.getHours()
        let m = date.getMinutes()
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        const date_1 = new Date(startTime + split * (i + 1))
        let h_1 = date_1.getHours()
        let m_1 = date_1.getMinutes()
        h_1 = h_1 < 10 ? '0' + h_1 : h_1
        m_1 = m_1 < 10 ? '0' + m_1 : m_1
        arr.push({
          time: h + ':' + m + '-' + h_1 + ':' + m_1,
          price: '',
          num: 0,
        })
      }
    }
  }
  return arr
}

const goodsInfo = {
  id: 0,
  name: '',
  key_word: '',
  unit: '件',
  price: '',
  weight: 0,
  cost_price: '',
  original_price: '',
  service: '',
  freight: '',
  pieces: '',
  forehead: '',
  quick_purchase: '0',
  video_url: '',
  content: '',
  goods_pic_list: [],
  goods_num: 0,
  goods_no: '',
  integral: { give: 0, forehead: 0, more: '0' },
  use_attr: '0',
  product_type: '5',
  is_negotiable: '0',
  cover_pic: '',
  individual_share: '0',
  share_type: '0',
  share_commission_first: 0.0,
  share_commission_second: 0.0,
  share_commission_third: 0.0,
  cat_id: [],
  attr_setting_type: 0,
  is_level: '0',
  deliverys: [],
  service_book: { data: [], date: 0, flag: 1 },
  desc: '',
  yield: '',
  varieties: '',
  growth_cycle: '',
  adopt_income: [],
  device_id:[]
}

const attrColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    width: 450,
    scopedSlots: { customRender: 'attr_list' },
  },
  {
    title: '库存',
    dataIndex: 'num',
    width: 200,
    scopedSlots: {
      filterDropdown: 'numDropdown',
      filterIcon: 'numIcon',
      customRender: 'num',
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    width: 200,
    scopedSlots: {
      filterDropdown: 'priceDropdown',
      filterIcon: 'priceIcon',
      customRender: 'price',
    },
  },
  {
    title: '货号',
    dataIndex: 'no',
    width: 200,
    scopedSlots: { customRender: 'no' },
    slots: { title: 'customNo' },
  },
  {
    title: '图片',
    dataIndex: 'pic',
    // width: 20,
    scopedSlots: { customRender: 'pic' },
    slots: { title: 'customPic' },
  },
]

const attrSelfPickColumns = [
  {
    title: '日期',
    dataIndex: 'date',
    width: 100,
  },
  {
    title: '时间',
    dataIndex: 'time',
    width: 100,
    scopedSlots: {
      filterDropdown: 'timeDropdown',
      filterIcon: 'timeIcon',
      customRender: 'time',
    },
  },
  {
    title: '操作',
    width: 30,
    scopedSlots: {
      customRender: 'action',
    },
  },
]

const sharaColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    width: 80,
    scopedSlots: { customRender: 'attr_list' },
  },
  {
    title: '一级分销',
    dataIndex: 'share_commission_first',
    width: 20,
    scopedSlots: { customRender: 'share_commission_first' },
  },
  {
    title: '二级分销',
    dataIndex: 'share_commission_second',
    width: 20,
    scopedSlots: { customRender: 'share_commission_second' },
  },
  {
    title: '三级分销',
    dataIndex: 'share_commission_third',
    width: 20,
    scopedSlots: { customRender: 'share_commission_third' },
  },
]

const userLevelColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    width: 80,
    scopedSlots: { customRender: 'attr_list' },
  },
]

export default {
  components: {
    quillEditor,
    STable,
    // AdvancedForm,
    WangEditor,
    SaleConfDrawer,
    cyyUploadVideo,
    cyyUploadImg,
  },
  data() {
    return {
      value1: '',
      value2: '',
      self_pick_date: '',
      self_pick_times: [],
      pickerOptions: {
        disabledDate: (time) => {
          if (this.productType == 1) {
            return time.getTime() < Date.now() - 86400000 || time.getTime() > Date.now() + 86400000 * 29
          } else if (this.productType == 2) {
            return time.getTime() < Date.now() - 86400000 || time.getTime() > Date.now() + 86400000 * 6
          } else {
            return time.getTime() < Date.now() - 86400000
          }
        },
      },
      endDateDisplay: {
        disabledDate(time) {
          return (
            time.getTime() > Date.now() + 24 * 60 * 60 * 1000 * 30 && time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          )
        },
      },
      goods_form: {
        is_form: '',
        form_name: '',
        form_list: [],
      },
      addType: 'text',
      createBookData: [],
      bookConfig: [],
      // attrBookColumns,
       selfPickConfig: [],
      attrSelfPickColumns,
      bookDay: 3,
      serviceBookDay: 7,
      activeTab: '1',
      copyType: 0,
      copyLoading: false,
      copyVal: '',
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 22 },
      },
      butLoading: false,
      editorOption: {},
      catName: [],
      isAttr: 0,
      productType: 5,
      shareType: 0,
      attrSettingType: 0, // 是否开启详细分销设置
      goodsInfo: {},
      postage: [],
      catList: [],
      level: [], // 会员等级
      verify_list: [],
      goods_verify_card_list: [],
      select_cart_id: {},
      userLevelColumns: userLevelColumns, // 会员表格
      GoodsAttr: [], // 遍历后商品提交规格
      AttrGroupList: [], // 处理后的添加规格
      attrList: [], // 可选择类型
      attrColumns: attrColumns, // 商品规格表结构
      sharaColumns: sharaColumns, // 分销配置
      autoFocusData: { type: '', index: 0 }, // 获取焦点参数,
      bookFocusData: { index: 0 }, // 预约焦点参数
      addAttrData: { groupName: '' }, // 添加规格数据
      hideDistribution: false, // 隐藏分销配置
      hideLevelDistribution: false, // 隐藏会员配置
      delivery_type: null,
      checkedList: [],
      deliveryOptions: [],
      defaultdeliveryOptions: [],
      times: {
        start: '',
        end: '',
      },
      serviceBookData: {
        data: [],
        date: 0,
        flag: 1,
      },
      goodsId: 0,
      previewImgSrc: '',
      showPreviwModal: false,
      showDeliverys: false,
      defaultFreight: '',
      verify_card_default: [],
      adopt_income: [],
      deviceList:[],// 可选择监控设备列表
      page:1,
      size:30
    }
  },
  created() {
    this.getCatList()
    this.getAttrList()
    var goodsId = this.$route.query.id ? this.$route.query.id : 0
    this.goodsId = goodsId
    this.getDeviceList()
    this.getGoodsData(goodsId)
    // console.log(moment().format('YYYY-MM-DD'))
  },
  computed: {
    getAttrActiveIndex(){
      return (index)=>{
        let {page,size} = this,
        active = (page-1) * size + index;

        return active
      }
    },

    getGoodsAttrList(){
      let {GoodsAttr,page,size} = this,
      index = (page-1) * size;
      return JSON.parse(JSON.stringify(GoodsAttr)).splice(index,size) || []
    },

    isEdit() {
      return !!this.$route.query.id
    },
    serviceBookDate() {
      const arr = this.serviceBookData.data || []
      var nowDate = moment().format('YYYY-MM-DD')
      arr.forEach((item, index) => {
        if (index == 0) {
          if (item.date == '') {
            item.date = nowDate
          }
        } else {
          if (item.date == '') {
            item.date = this.dateNext(arr[index - 1].date)
          }
        }
      })
      return arr
    },
    // serviceTimeData() {
    //   return (data) => {
    //     let arr = []
    //     data.time.forEach((item) => {
    //       item.times.forEach((time) => {
    //         arr.push(time)
    //       })
    //     })
    //     return arr
    //   }
    // },
  },
  watch: {
    isAttr(newVal, val) {
      if (newVal > 0) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            goods_num: 0,
            goods_no: '',
          })
        })
      } else {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.goodsInfo, ['goods_num', 'goods_no']))
        })
      }
    },
    $route: function (val) {
      this.getCatList()
      if (val.query.id > 0) {
        this.getGoodsData(val.query.id)
      } else {
        this.goodsInfo = goodsInfo
      }
    },
    goodsInfo(val) {
      this.updateData()
    },
    AttrGroupList(val) {
      this.setGoodsAttr(val)
    },
    level(val) {
      // 监听会员等级变化
      if (val.length > 0) {
        this.userLevelColumns = [
          {
            title: '规格',
            dataIndex: 'attr_list',
            width: 80,
            scopedSlots: { customRender: 'attr_list' },
          },
        ]
        val.forEach((el) => {
          this.userLevelColumns.push({
            title: el.name,
            dataIndex: 'member' + el.id,
            width: 80,
            scopedSlots: { customRender: 'memberInfo' },
          })
        })
      }
    },
    // 给复选日期绑定值
    bookConfig(val) {
      if (!val.length) return
      this.value2 = [val[0].date, val[val.length - 1].date]
    },
    serviceBookData(val) {
      if (!val.length) return
      console.log(val, 'createBookData')
      this.value1 = [val.data[0].date, val.data[val.data.length - 1].date]
    },
  },
  methods: {
    removeDomain (index) {
      if (index !== -1) {
        this.adopt_income.splice(index, 1);
      }
    },
    addDomain () {
     this.adopt_income = this.adopt_income ? this.adopt_income : []
      this.adopt_income.push({
        pic: '',
        income_name: '',
      });
    },
    deliveryChange(e) {
      this.$nextTick(() => {
        console.log('form:{}', this.form.getFieldValue('deliverys'))
        this.showDeliverys = this.form.getFieldValue('deliverys').includes('快递')
      })
    },
    goodsVideoCb(e) {
      this.goodsInfo.video_url = e.data
    },
    delUrl(index) {
      this.GoodsAttr[index].pic = ''
    },
    delAdoptIncome(index) {
      this.adopt_income[index].pic = ''
    },
    cardChange(e) {
      console.log(e)
      let arr = []
      e.forEach((d) => {
        let [item] = this.verify_list.filter((i) => {
          return i.name == d
        })
        if (item) {
          arr.push(item)
        }
      })
      this.goods_verify_card_list = arr
    },
    previewPic(src) {
      this.previewImgSrc = src
      this.showPreviwModal = true
    },
    // 重置预约服务日期
    resetData() {
      const arr = []

      for (let i = 0; i < this.serviceBookData.date; i++) {
        arr.push({
          date: '',
          time: [],
          num: 0,
        })
      }
      console.log(this.serviceBookData.data, arr)
      this.serviceBookData.data = arr
    },
    // 删除日期
    deleteDate(row, index) {
      console.log(row, index)
      this.serviceBookData.data.splice(index, 1)
      this.serviceBookData.data.push({
        date: '',
        time: [],
        num: 0,
      })
      console.log(this.serviceBookData.data)
    },
    deleteBookDate(row, index) {
      console.log(index)
      this.bookConfig.splice(index, 1)
      // this.createBookData.splice(index, 1)
      // const bookDate = this.bookConfig[this.bookConfig.length - 1].date
      // const createDate = this.createBookData[this.createBookData.length - 1].date
      // this.bookConfig.push({
      //   date: this.dateNext(bookDate),
      //   num: 0,
      //   price: 0
      // })
      // this.createBookData.push({
      //   date: this.dateNext(createDate),
      //   num: 0,
      //   price: 0
      // })
    },
    setData() {
      this.bookDay = 30
      this.createBookData = []
      var lastDate = moment().format('YYYY-MM-DD')
      for (var $i = 0; $i < 30; $i++) {
        if ($i > 0) {
          lastDate = this.dateNext(lastDate)
        }
        this.createBookData.push({ date: lastDate, num: 0, price: 0.0 })
      }
      // this.bookConfig = this.createBookData
    },
    changeFlag(e) {
      console.log(e)
      if (e) {
        this.serviceBookData.data.forEach((item) => {
          item.time = []
        })
      }
    },
    changeTime(e, row) {
      console.log(e, row)
      if (row.start_time && row.start_time != '' && row.end_time && row.end_time != '') {
        const split = this.goodsInfo.service_book.flag == 1 ? 30 : this.goodsInfo.service_book.flag == 2 ? 60 : 0
        const times = getDateArray(row.start_time, row.end_time, split)
        row.times = times
      }
    },
    deleteTime(item, index) {
      item.time.splice(index, 1)
    },
    addTime(attrItem, attrIndex) {
      console.log(attrItem, attrIndex)
      attrItem.time.push({
        end_time: '',
        start_time: '',
        times: [],
      })
    },
   
    deleteSelfPickTime(item, index) {
      item.splice(index, 1)
    },
    addSelfPickTime(attrItem, attrIndex) {
      console.log(attrItem, attrIndex)
      attrItem.push({
        end_time: '',
        start_time: '',
      })
    },
    mockBookData() {
      const originLength = this.bookConfig.length

      if (originLength < 30) {
        if (originLength == 0) {
          var lastDate = moment().format('YYYY-MM-DD')
        } else {
          var lastDate = this.bookConfig[originLength - 1].date
        }
        for (var $i = 0; $i < 30 - originLength; $i++) {
          if ($i > 0 || originLength > 0) {
            lastDate = this.dateNext(lastDate)
          }
          this.createBookData.push({ date: lastDate, num: 0, price: 0.0 })
        }
      }
      console.log(this.createBookData)
      this.bookConfig = this.createBookData.slice(0, this.bookDay)
    },
    // 生成日期
    dateNext(d) {
      d = new Date(d)
      d = +d + 1000 * 60 * 60 * 24
      d = new Date(d)
      // 格式化
      const month = d.getMonth() + 1 > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)
      const date = d.getDate() > 9 ? d.getDate() : '0' + d.getDate()
      return d.getFullYear() + '-' + month + '-' + date
    },
    // 分销设置开关
    individualShareChange(e, type) {
      console.log(e)
      this.form.validateFields((err, values) => {
        console.log(values)
        if (type == 'share') {
          // 0: 关闭  1：开启
          if (values.individual_share == 1) {
            this.hideDistribution = true
          } else {
            this.hideDistribution = false
          }
        } else {
          // 0: 关闭  1：开启
          if (values.is_level == 1) {
            this.hideLevelDistribution = true
          } else {
            this.hideLevelDistribution = false
          }
        }
      })
    },
    /**
     * 保存商品
     */
    submitAdd(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log(456);
          // console.log(values)
          this.butLoading = true
          values.attr = this.GoodsAttr
          values.cover_pic = this.goodsInfo.goods_pic_list[0].pic_url
          values.video_url = this.goodsInfo.video_url
          values.goods_pic_list = this.goodsInfo.goods_pic_list
          values.goods_verify_card_list = this.goods_verify_card_list
          
          // values['delivery_type'] = JSON.parse(JSON.stringify(values.deliverys))
          // values.delivery_type.forEach((d, index) => {
          //   values.delivery_type.splice(index, 1, findKey(this.delivery_type, d))
          // })

          values.service_book = this.goodsInfo.service_book
          values.service_book.data = this.serviceBookData.data
          values.date_book = this.bookConfig
          values.form = this.goods_form
          values.adopt_income = this.adopt_income
          values.self_pick_date = this.self_pick_date
          values.self_pick_times = this.self_pick_times
       
          //   console.log(789);
          // console.log(values)
          save(values).then((res) => {
            this.butLoading = false
            if (res.code == 0) {
              this.$router.push({ name: 'AdoptList' })
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
          this.butLoading = false
        } else {
          console.log(err)
          for (const key in err) {
            this.$message.error(err[key].errors[0].message)
          }
        }
      })
    },
    /**
     * 获取商品详情
     */
    getGoodsData(goodsId) {
      const hide = this.$message.loading('加载中', 0)
      // this.goodsInfo = {}
      edit({ id: goodsId }).then((res) => {
        console.log(res.data, 'info')
        if (res.data.info && res.data.info.id > 0) {
          this.goodsInfo = res.data.info
        } else {
          this.goodsInfo = goodsInfo
        }
        const info = res.data.info
        const postage = res.data.postage
        const postageDefault = postage.filter((d) => {
          return d.is_enable == 1
        })
        if (postageDefault.length) {
          this.postage = res.data.postage
        } else {
          this.postage = [{ id: '0', name: '默认' }, ...res.data.postage]
        }
        this.adopt_income = res.data.info.adopt_income
        this.self_pick_date = res.data.info.self_pick_date
        this.self_pick_times = res.data.info.self_pick_times ? res.data.info.self_pick_times : []
         
        this.level = res.data.level
        this.verify_list = res.data.verify_list
        this.goods_verify_card_list = res.data.goods_verify_card_list
        let arr = []
        res.data.goods_verify_card_list.forEach((d) => {
          if(d && d.name) {
            arr.push(d.name)
          }
        })
        this.verify_card_default = arr
        if (res.data.info) {
          this.delivery_type = { ...res.data.info.delivery_type, online: '线上发货' }
        } else {
          this.delivery_type = []
        }

        this.serviceBookData = res.data.info.service_book
        console.log(res.data.info.service_book, 'fuwuyuyue')
        this.bookConfig = res.data.info.date_book.data
        this.bookDay = res.data.info.date_book.date
        // this.mockBookData()
        this.setData()
        this.goods_form = res.data.info.form
        if (info && info.delivery_type) {
          this.deliveryOptions = Object.values(info.delivery_type)
          this.defaultdeliveryOptions = Object.values(info.delivery_type)
        }
        try {
          if (info.product_type == 3) {
            this.deliveryOptions = ['线上发货']
            info.goods_delivery_type = ['online']
          }
          const goods_delivery_type = JSON.parse(JSON.stringify(info.goods_delivery_type))
          goods_delivery_type.forEach((d, index) => {
            goods_delivery_type.splice(index, 1, this.delivery_type[d])
          })
          this.checkedList = goods_delivery_type || Object.values(info.delivery_type)
          this.showDeliverys = info.goods_delivery_type.includes('express')

          console.log('运费模板：', this.checkedList)
          if (postageDefault.length) {
            this.defaultFreight = postageDefault[0].id
          } else {
            this.defaultFreight = '0'
          }
          this.$nextTick(() => {
            console.log('form:{}', this.form.getFieldValue('freight'))
          })
        } catch (err) {
          console.log(err)
        }
        console.log('attr =>', res.data.AttrGroupList)
        if (res.data.AttrGroupList.length === 0) {
          this.setDefaultAttr()
        } else {
          this.AttrGroupList = res.data.AttrGroupList
        }
        this.updateData()
        hide()
      })
    },
    copyChange(val) {
      this.copyType = val
    },
    /**
     * 渲染form表单
     */
    updateData() {
      this.shareType = this.goodsInfo.share_type
      this.attrSettingType = this.goodsInfo.attr_setting_type
      this.isAttr = this.goodsInfo.use_attr
      this.productType = this.goodsInfo.product_type
      this.hideDistribution = this.goodsInfo.individual_share == 0
      this.hideLevelDistribution = this.goodsInfo.is_level == 0
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.goodsInfo, [
            'id',
            'name',
            'is_negotiable',
            'key_word',
            'unit',
            'price',
            'rate',
            'cost_price',
            'original_price',
            'service',
            'freight',
            'pieces',
            'forehead',
            'quick_purchase',
            'content',
            'goods_num',
            'goods_no',
            'use_attr',
            'product_type',
            'individual_share',
            'share_type',
            'share_commission_first',
            'share_commission_second',
            'share_commission_third',
            'cat_id',
            'attr_setting_type',
            'confine_count',
            'virtual_sales',
            'is_level',
            'weight',
            'desc',
            'yield',
            'varieties',
            'growth_cycle',
            'device_id',
          ])
        )
        this.form.setFieldsValue({
          'integral[give]': this.goodsInfo.integral ? this.goodsInfo.integral.give : 0,
          'integral[forehead]': this.goodsInfo.integral ? this.goodsInfo.integral.forehead : 0,
          'integral[more]': this.goodsInfo.integral ? this.goodsInfo.integral.more : 0,
          freight: this.defaultFreight,
        })
        this.$nextTick(() => {
          console.log('form:{}', this.form.getFieldValue('freight'))
        })
      })
    },
    onDescChange: function (content) {
      console.log(content)
      this.form.setFieldsValue({
        content: content,
      })
    },
    /**
     * 是否使用规格
     */
    onChangeAttr(val) {
      this.isAttr = val.target.value
    },
    /**
     * 产品类型切换
     */
    onChangeProduct(val) {
      this.productType = val.target.value
      console.log(this.checkedList)
      const productChoose = val.target.value
      if (productChoose == 0) {
        // 普通商品
        if (this.isAttr - 0 === 0) {
          this.setDefaultAttr()
        } else {
          this.setGoodsAttr(this.AttrGroupList)
        }
      }
      if (productChoose == 1 || productChoose == 2) {
        this.deliveryOptions = ['自提']
        this.$nextTick(() => {
          console.log('form:{}', this.form.getFieldValue('use_attr'))
          this.showDeliverys = false
          const use_attr = this.form.getFieldValue('use_attr')
          if (use_attr == 0) {
            this.form.setFieldsValue({
              use_attr: '1',
            })
            this.isAttr = '1'
          }
        })
      } else {
        if (productChoose == 3) {
          this.deliveryOptions = ['线上发货']
          this.showDeliverys = false
          this.goodsInfo.deliverys = ['线上发货']
          this.form.setFieldsValue(pick(this.goodsInfo, ['deliverys']))
          return
        }
        this.showDeliverys = true
        this.deliveryOptions = this.defaultdeliveryOptions
      }
    },
    OnChangeSlider(val) {
      console.log(val, this.createBookData)
      // var start = this.getDateType(val[0])
      // var end = this.getDateType(val[1])
      var startIndex = this.createBookData.findIndex((item) => {
        return item.date == val[0]
      })
      var endIndex = this.createBookData.findIndex((item) => {
        return item.date == val[1]
      })
      this.bookConfig = this.createBookData.slice(startIndex, endIndex + 1)
      console.log(startIndex, endIndex, this.bookConfig)
      // this.bookConfig = this.createBookData.slice(0, val)
    },
    getDateType(date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      return `${y}-${m}-${d}`
    },
    onChangeServiceSlider(e) {
      console.log(e, this.serviceBookDate)
      // return
      const length = e - this.serviceBookDate.length
      if (length > 0) {
        for (let i = 0; i < length; i++) {
          this.serviceBookData.data.push({
            date: '',
            time: [],
            num: '',
          })
        }
      } else {
        const count = Math.abs(length)
        for (let i = 0; i < count; i++) {
          this.serviceBookData.data.splice(this.serviceBookData.data.length - 1, 1)
        }
        console.log(this.serviceBookData.data)
      }
    },
    setDefaultAttr() {
      this.GoodsAttr = [
        {
          attr_list: [
            {
              attr_name: '默认',
            },
          ],
          num: 0,
          price: 0,
          supplier_price: 0,
          no: '',
          pic: '',
          share_commission_first: '',
          share_commission_second: '',
          share_commission_third: '',
        },
      ]
    },
    /**
     * 分销类型 金额 | %
     */
    onChangeShareType(val) {
      this.shareType = val.target.value
    },
    onChangeSettingType(val) {
      this.attrSettingType = val.target.value
    },
    /**
     * 获取分类
     */
    getCatList() {
      catListApi({ is_show: -1 }).then((res) => {
        this.catList = res.data.list
      })
    },
    /**
     * 获取监控设备
     */
    getDeviceList(){
      deviceListApi().then((res) => {
        console.log(res);
        if(res.code == 0){
          this.deviceList = res.data
        }
      })
    },
    onChangeCat(e) {
      console.log('onChangeCat', e)
    },
    /**
     * 获取添加规格类型
     */
    getAttrList() {
      attrListApi().then((res) => {
        this.attrList = res.data.list
      })
    },
    /**
     * 选中规格类型处理
     */
    attrSelectChange(e) {
      var attr = this.attrList[e]
      var AttrGroupList = []
      attr.children.forEach((element) => {
        var attrItem = []
        element.children.forEach((element2) => {
          attrItem.push({
            attr_name: element2.name,
          })
        })
        var attrGroup = {
          attr_group_name: element.name,
          attr_list: attrItem,
        }
        AttrGroupList.push(attrGroup)
      })
      this.AttrGroupList = AttrGroupList
    },
    /**
     * 规格类型筛选
     */
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    /**
     * 根据添加规格，生成规格数据
     */
    setGoodsAttr(attrGroup) {
      let attrList = []
      attrList = this.setGoodsAttrItem(attrGroup, [], 0)
      this.GoodsAttr = this.getAttrDataInfo(attrList)
    },
    /**
     * 处理规格数据
     */
    setGoodsAttrItem(attrGroup, attrList, index) {
      var attrList1 = []
      if (index < attrGroup.length) {
        if (index === 0 || attrList.length === 0) {
          if (attrGroup[index].attr_list.length > 0) {
            attrGroup[index].attr_list.forEach((element) => {
              element.attr_group_name = attrGroup[index].attr_group_name
              attrList1.push([element])
            })
          }
        } else {
          if (attrGroup[index].attr_list.length > 0) {
            attrList.forEach((element) => {
              attrGroup[index].attr_list.forEach((element1) => {
                element1.attr_group_name = attrGroup[index].attr_group_name
                attrList1.push(element.concat([element1]))
              })
            })
          } else {
            attrList1 = attrList
          }
        }
        ++index
        return this.setGoodsAttrItem(attrGroup, attrList1, index)
      } else {
        return attrList
      }
    },
    /**
     * 获取其他详细数据
     */
    getAttrDataInfo(attr) {
      var attrList = []
      attr.forEach((element) => {
        var setAttr = {}
        if (this.goodsInfo.attr) {
          JSON.parse(this.goodsInfo.attr).forEach((element2) => {
            if (element2.attr_list.length === element.length) {
              var loading = true
              if (loading && this.compareAttr(element2.attr_list, element)) {
                setAttr = element2
                loading = false
              }
            }
          })
        }
        var data = {
          attr_list: element,
          num: setAttr && setAttr.num ? setAttr.num : 0,
          price: setAttr && setAttr.price ? setAttr.price : 0,
          no: setAttr && setAttr.no ? setAttr.no : '',
          pic: setAttr && setAttr.pic ? setAttr.pic : '',
          share_commission_first: setAttr && setAttr.share_commission_first ? setAttr.share_commission_first : '',
          share_commission_second: setAttr && setAttr.share_commission_second ? setAttr.share_commission_second : '',
          share_commission_third: setAttr && setAttr.share_commission_third ? setAttr.share_commission_third : '',
        }
        for (const key in setAttr) {
          if (key.indexOf('member') !== -1) {
            data[key] = setAttr[key]
          }
        }
        attrList.push(data)
      })
      return attrList
    },
    compareAttr(val1, val2) {
      var compareLen = 0
      val1.forEach((element1) => {
        val2.forEach((element2) => {
          if (element1.attr_name === element2.attr_name) {
            compareLen++
          }
        })
      })
      return compareLen === val1.length
    },
    /**
     * 修改规格数据
     */
    handleChange(value, type, index) {
      console.log(value)
      this.autoFocusData = {
        type: type,
        index: index,
      }
      this.GoodsAttr[this.getAttrActiveIndex(index)][type] = value === null ? '' : value
    },
    /**
     * 修改预约规格数据
     */
    handleBookChange(value, type, index) {
      console.log(value)
      this.bookFocusData = {
        type: type,
        index: index,
      }
      this.bookConfig[index][type] = value === null ? '' : value
    },
    /**
     * 添加规格组
     */
    addAttrGroup() {
      if (this.addAttrData.groupName) {
        var data = {
          attr_group_name: this.addAttrData.groupName,
          attr_list: [],
        }
        this.AttrGroupList.push(data)
      }
      this.addAttrData.groupName = ''
    },
    /**
     * 添加规格值
     */
    addAttr(e, index, groupName) {
      var data = {
        attr_group_name: groupName,
        attr_name: e,
      }
      var attrGroup = this.AttrGroupList
      attrGroup[index].attr_list.push(data)
      this.AttrGroupList = null
      this.AttrGroupList = attrGroup
    },
    /**
     * 删除规格组
     */
    delAttrGroup(index) {
      this.AttrGroupList.splice(index, 1)
    },
    delAttr(index1, index2) {
      var attrGroup = this.AttrGroupList
      attrGroup[index1].attr_list.splice(index2, 1)
      this.AttrGroupList = null
      this.AttrGroupList = attrGroup
    },
    settingAll(e, setSelectedKeys, selectedKeys) {
      console.log('selectedKeys', selectedKeys)
      console.log('setSelectedKeys', setSelectedKeys)
      this.GoodsAttr.forEach((element, index) => {
        this.GoodsAttr[index][setSelectedKeys.column.dataIndex] = e
      })
    },
    settingDayAll(e, setSelectedKeys, selectedKeys) {
      console.log('selectedKeys', selectedKeys)
      console.log('setSelectedKeys', setSelectedKeys)
      this.bookConfig.forEach((element, index) => {
        this.bookConfig[index][setSelectedKeys.column.dataIndex] = e
      })
    },
    goodsCopy() {
      if (this.copyVal == '') {
        this.$message.warning('请输入需要采集的商品地址')
        return
      }
      this.copyLoading = true
      const hide = this.$message.loading('拉取中', 0)
      // if (this.copyType > 0) {
      //   edit({ id: this.copyVal }).then((res) => {
      //     var goods = res.data.info
      //     delete goods.id
      //     this.goodsInfo = goods
      //     if (res.data.AttrGroupList.length === 0) {
      //       this.setDefaultAttr()
      //     } else {
      //       this.AttrGroupList = res.data.AttrGroupList
      //     }
      //     this.updateData()
      //     hide()
      //   })
      // } else {
      Copy({
        url: this.copyVal,
      })
        .then((res) => {
          // console.log(res.data.attr_group_list)
          if (res.code === 0) {
            var goods = this.goodsInfo
            delete goods.id
            this.goodsInfo = {}
            const pic = []
            goods.content = res.data.desc
            res.data.pics.forEach((item) => {
              pic.push({ pic_url: item })
            })
            // goods.cover_pic = res.data.pic_url
            goods.goods_pic_list = pic
            if (res.data.price) {
              goods.price = res.data.price
            }

            if (res.data.video) {
              goods.video_url = res.data.video
            }

            goods.virtual_sales = res.data.vagueSellCount

            if (res.data.marketPrice) {
              goods.original_price = res.data.marketPrice
            }

            goods.name = res.data.title
            if (goods.product_type == '0' || goods.product_type == '4') {
              if (res.data.attr.length === 0) {
                this.setDefaultAttr()
              } else {
                this.AttrGroupList = res.data.attrGroup
                setTimeout(() => {
                  this.GoodsAttr = res.data.attr
                }, 1000)
              }
            }

            goods.use_attr = res.data.attr.length > 0 ? '1' : '0'
            this.goodsInfo = goods
            this.updateData()
          }
        })
        .catch((error) => {
          this.$message.error('网络错误，请重试')
          console.log(error)
        })
        .then(() => {
          hide()
          this.copyLoading = false
        })
      // }
    },
    delPic(e) {
      this.goodsInfo.goods_pic_list.splice(e.index, 1)
    },
    selectPic(e) {
      console.log('eeeeeeeeee', e)
      console.log(this.goodsInfo)
      this.goodsInfo.goods_pic_list = this.goodsInfo.goods_pic_list ? this.goodsInfo.goods_pic_list : []
      e.data.forEach((ele) => {
        this.goodsInfo.goods_pic_list.push({ pic_url: ele })
      })
      console.log(this.goodsInfo)
    },
    changeChecked(e, index) {
      const checked = e.target.checked ? 1 : 0
      console.log(this.goods_form.form_list)
      this.goods_form.form_list[index].required = checked
    },
    addList() {
      this.goods_form.form_list.push({
        type: this.addType,
        name: '',
        tip: '',
        required: '0',
        sort: '0',
        is_delete: '0',
      })
    },
    deleteItem(index) {
      console.log(index)
      this.goods_form.form_list.splice(index, 1)
    },
  },
}
</script>
<style scoped lang="less">
.sku-group {
  /deep/.ant-form-item-control-wrapper {
    width: 91%;
  }
}
.item-table {
  width: 100%;
  max-width: 1000px;
  display: inline-block;
}
.item-colunm-content {
  /deep/.ant-checkbox-group {
    display: flex;
    align-items: center;
    label {
      margin-top: 6px;
    }
  }
}
/deep/.ant-form-explain {
  margin-top: 10px;
}
/deep/.ant-tabs-bar {
  margin: 0;
}
/deep/.ant-tabs-nav .ant-tabs-tab {
  padding: 10px 0;
  margin: 0 49px 0 0;
}
.required::before {
  content: '*';
  color: red;
}
td {
  padding: 0 6px;
}
th {
  padding: 0 6px;
}
tr:hover {
  background: #f0f0f0;
}
.goods_pic_item {
  width: 80px;
  height: 80px;
  border-radius: 3px;
}

.upload-box {
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  .upload-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .self-com {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 111;
    /deep/.ant-btn {
      width: 104px;
      height: 103px;
    }
    /deep/.ant-input-group-wrapper {
      width: 104px;
      height: 104px;
      .ant-input-group {
        width: 100%;
        height: 100%;
        span:nth-child(1) {
          display: none;
        }
        span:nth-child(3) {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
  }
}

.guige-image-box {
  .upload-box {
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    opacity: 1;
    border-radius: 4px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    .upload-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .self-com {
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 111;
      /deep/.ant-btn {
        width: 50px;
        height: 49px;
      }
      /deep/.ant-input-group-wrapper {
        width: 50px;
        height: 50px;
        .ant-input-group {
          width: 100%;
          height: 100%;
          span:nth-child(1) {
            display: none;
          }
          span:nth-child(3) {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
    }
  }

  .goods_pic_item_box {
    box-shadow: 0 0 5px rgba(170, 170, 170, 0.671);
    border-radius: 3px;
    position: relative;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 4px;
    float: left;
    margin: 0 8px 0 0px;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    .upload-img-box {
      width: 98%;
      height: 98%;
      position: relative;
      .action-hover {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 11;
        display: none;
        opacity: 0;
        transition: all 0.3s;

        .hover-bg {
          width: 100%;
          height: 100%;
          background-color: #000000;
          opacity: 0.4;
        }
        .hover-body {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 11;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .action-icons {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px;
          .anticon {
            color: #ffffff;
            font-size: 17px;
          }
          .anticon:nth-child(1) {
            margin-right: 10px;
          }
        }
      }
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .upload-img-box:hover > .action-hover {
      display: block;
      opacity: 1;
    }
  }
}

.video-box {
  width: 104px;
  height: 104px;
  position: relative;
  background: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  margin-left: 8px;
  video {
    width: 100%;
    height: 100%;
  }
  .action-hover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    display: none;
    opacity: 0;
    transition: all 0.3s;
    background-color: #000000;
    opacity: 0.4;

    .hover-bg {
      width: 100%;
      height: 100%;
      // background-color: #000000;
      // opacity: 0.4;
    }
    .hover-body {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .action-icons {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px;
      .anticon {
        color: #ffffff;
        font-size: 17px;
      }
      .anticon:nth-child(1) {
        margin-right: 10px;
      }
    }
  }
}
.video-box:hover > .action-hover {
  display: block;
}

.goods_pic_item_box {
  width: 80px;
  height: 80px;
  box-shadow: 0 0 5px rgba(170, 170, 170, 0.671);
  border-radius: 3px;
  position: relative;
  margin-right: 10px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  float: left;
  margin: 0 8px 0 0px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  .upload-img-box {
    width: 88px;
    height: 88px;
    position: relative;
    .action-hover {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
      display: none;
      opacity: 0;
      transition: all 0.3s;

      .hover-bg {
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: 0.4;
      }
      .hover-body {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 11;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .action-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        .anticon {
          color: #ffffff;
          font-size: 17px;
        }
        .anticon:nth-child(1) {
          margin-right: 10px;
        }
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .upload-img-box:hover > .action-hover {
    display: block;
    opacity: 1;
  }
}

.distribution-table {
  /deep/.ant-table-small {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 4px;
    .ant-table-body {
      padding: 10px 0;
      margin: 0 12px;
      .ant-table-thead {
        height: 54px;
        background: #fafafa;
        border-radius: 4px 4px 0px 0px;
        border-bottom: 1px solid#E8E8E8;
      }
      tr {
        td {
          padding-top: 15px !important;
          padding-bottom: 15px !important;
        }
      }
    }
  }
}

.goods_pic_item_box .icon {
  position: absolute;
  top: 2px;
  right: 2px;
  /* margin-right: 10px; */
}
.timeSlot {
  display: flex;
  align-items: center;
}
.timePrice div {
  display: flex;
  align-items: center;
  span {
    margin-right: 10px;
    width: 100px;
    min-width: 60px;
  }
}
.tips {
  display: flex;
  flex-direction: column;
  color: #d9534f;
  font-size: 14px;
  span {
    line-height: normal;
  }
}
.add {
  display: inline-block;
  position: relative;
  .add-action {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 40px;
    height: 29px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-left: 1px solid #d9d9d9;
    cursor: pointer;
  }
}
.warning {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 10px;
}
.table {
  width: 100%;
  margin-top: 36px;
  padding: 10px 12px;

  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  .table-body {
    .ant-row {
      min-height: 54px;
      opacity: 1;
      border-radius: 4px 4px 0px 0px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
    }
    .self-th {
      background: #fafafa;
    }
  }
  .title {
    .ant-col {
      text-align: center;
      padding: 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
.list {
  .item {
    background-color: #fff;
    padding: 5px;
    display: flex;
    align-items: center;
    .ant-col {
      text-align: center;
      padding: 0 10px;
    }
  }
}
.tr-row:hover {
  background-color: #e6f7ff;
}

.tip {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: normal;
  text-align: left;
}
.form-title {
  margin-bottom: 24px;
  width: 64px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Medium;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.85);
  opacity: 1;
}
.lable-margin24 {
  .ant-form-item-label {
    margin: 24px 0;
  }
}
.guige-table {
  /deep/.ant-table-thead {
    background: #fafafa;
  }
}

.guige-label {
  color: rgba(0, 0, 0, 0.85);
  text-align: right;
}

// 搜索input
.add-guige {
  /deep/.ant-input-wrapper {
    .ant-input {
      width: 172px;
      height: 28px;
    }
    .ant-input-search-button {
      height: 28px;
      line-height: 28px;
      width: 28px;
      text-align: center;
      background: #fff;
      color: rgba(0, 0, 0, 0.45);
      border-color: rgb(217, 217, 217);
    }
  }
}
.income-box {
  display: flex;
  align-items: center;
  justify-content: start;
  margin: 5px;
}
</style>
